<template>
  <view class="product-card flex mt-24rpx">
    <view class="flex w-full  items-center">
      <up-image width="84rpx" height="84rpx" :src="record?.imageUrlList?.[0]" radius="10px"></up-image>
      <view class="card-text ml-34rpx">
        <view class="flex justify-between mb-10rpx">
          <view class="font-700 text-28rpx ellipse max-w-360rpx">{{ record.name }}</view>
          <view class="font-700 text-24rpx"
            :class="record.productState === '0' || record.productState === '3' ? 'blue-color' : 'green-color'">{{
              statusMap.get(record.productState) }}</view>
        </view>
        <view class="card-content py-10rpx font-400 text-24rpx overflow-ellipsis">
          {{ record.description }}
        </view>
        <view class="card-content text-32rpx">
          {{ record.oemCode }}
        </view>
        <view v-if="record.productPriceList?.length" class="flex">
          <span>{{ record.productPriceList[0]?.currency?.unitSymbol }}{{
            thousandSeparatFormat(record.productPriceList[0]?.productPrice) }}</span>
          <!-- <span v-if="record.productPriceList?.length > 1">￥{{
        thousandSeparatFormat(record.productPriceList[0].productPrice) }}-{{
        thousandSeparatFormat(record.productPriceList[record.productPriceList.length - 1]?.productPrice) }}</span>
          <span v-else>￥{{ thousandSeparatFormat(record.productPriceList[0]?.productPrice) }}</span> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { thousandSeparatFormat, deThousandSeparatFormat } from "@/utils/utils";

const props = defineProps({
  record: {
    type: Object,
    default: () => { },
  },
})
const statusMap = new Map([
  ['0', '已发布'],
  ['1', '已采用'],
  ['2', '已采用'],
  ['3', '已发布'],
  ['4', '价格变更'],
])
</script>
<style scoped lang="scss">
.product-card {
  background-color: #fff;
  box-sizing: border-box;
  align-items: center;
  min-height: 168rpx;
  max-height: 216rpx;
  box-sizing: border-box;
  padding-bottom: 32rpx;
  border-bottom: 1px solid #E0E3E1;

  .card-text {
    width: calc(100% - 118rpx);

    .card-content {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      display: -webkit-box;
      text-overflow: ellipsis;
      /* 高度为行高的两倍 */
      max-height: 80rpx;
      /* 设置行高 */
      line-height: 40rpx;
      /* 容器高度为行高的两倍 */
      // height: 80rpx;
      /* 设置宽度 */
      width: 100%;
      word-break: break-all;
    }
  }
}
</style>
